
import React from 'react'

class MessageEventKeyList extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    console.log(this.props.name)
  }

  renderList() {
    var content = this.props.data.map(function(item) {
      return (
        <li>{item}</li>
      )
    })
    return content;
  }

  render() {
    var list = this.renderList();
    return (
      <div className="message-eventkey-list">
        <ul>
          {list}
        </ul>
      </div>
    )
  }
}

class MessageAddEventKey extends React.Component {
  constructor(props) {
    super(props)
  }

  onAddEventButtonClick() {
    var input = this.refs.editEventkeyInput
    var text = $(input).val();

    this.props.onAddEventKey(text)
    $(input).val("")
  }

  renderWrapper() {
    if (this.props.isShow) {
      return (
        <div className="message-add-eventkey-wrapper">
          <div className="form-group">
            <label for="exampleInputEmail1">关键字</label>
            <input ref="editEventkeyInput" type="email" className="form-control" id="edit-eventkey-input" placeholder="关键字" />
          </div>
          <button type="button" className="btn btn-success"
                  onClick={(event)=>this.onAddEventButtonClick(event)}>保存</button>
        </div>
      )
    }else {
      return "";
    }
  }

  render() {
    return (
      <div className="message-add-eventkey">
        {this.renderWrapper()}
      </div>
    )
  }
}


class MessageSettingRec extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      list: ["key1", "key2"],
      showAddView: false
    }
  }

  componentDidMount() {
    console.log("componentDidMount")
  }

  componentDidUpdate() {
    console.log("componentDidUpdate")
  }

  onAddEventKey(text) {
    var list = this.state.list;
    list.push(text)
    this.setState({
      list: list,
      showAddView: false
    })
  }

  onButtonAddItem(event) {
    this.setState({
      showAddView: true
    });
  }

  render() {
    var self = this;
    return (
      <div className="message-rec-content">
        <button type="button" className="btn btn-success"
                onClick={(event) => self.onButtonAddItem(event)}>添加规则</button>
        <MessageAddEventKey
          onAddEventKey = {this.onAddEventKey.bind(self)}
          isShow = {this.state.showAddView}/>
        <MessageEventKeyList
          data = {this.state.list}
          name="list"/>

      </div>
    )
  }

}


export default MessageSettingRec
